<script setup lang="ts">
import { InvoiceTitleType } from '@/types/enum'

defineProps<{
  titleType: InvoiceTitleType
  title: string
  id: string
}>()

defineEmits(['edit'])
</script>

<template>
  <view class="relative mb-30rpx overflow-hidden rounded-20rpx bg-white px-30rpx pb-36rpx pt-60rpx">
    <view
      class="absolute left-0 top-0 rounded-br-22rpx bg-gradient-to-r px-16rpx py-10rpx text-26rpx text-white font-bold leading-26rpx"
      :class="titleType === InvoiceTitleType.enterprise ? 'from-#FF966D to-#FA5431' : 'from-#3F8BF6 to-#549FF7'"
    >
      {{ titleType === InvoiceTitleType.enterprise ? '企业' : '个人' }}
    </view>
    <view class="flex items-center justify-between">
      <view class="text-28rpx text-#333333 font-medium leading-28rpx">
        <view>发票抬头：{{ title }}</view>
        <Spacer height="24" />
        <view>纳税人识别号：{{ id }}</view>
      </view>
      <image
        class="ml-40rpx h-26rpx w-29rpx flex-shrink-0"
        src="@/static/images/edit_black_fill.png"
        @tap="$emit('edit')"
      />
    </view>
  </view>
</template>
